$grid-toolbar: (
  reset-column-width: 18px,
  reset-column-height: 18px,
);

@include b(grid-toolbar) {
  @include e(column-list) {
    @include set-component-css-var(grid-toolbar, $grid-toolbar);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 160px;
    max-height: 400px;

    @include m(header) {
      @include flex(row, space-between, center);

      position: relative;
      flex-shrink: 0;
      width: 100%;
      padding: getCssVar(spacing, extra-tight) getCssVar(spacing, extra-tight) getCssVar(spacing, extra-tight) 0;

      .#{bem('grid-toolbar__column-list--header-item')} {
        padding: 0 getCssVar(spacing, extra-tight);

        &:nth-child(1) {
          min-width: 130px;
        }

        &:nth-child(2) {
          min-width: 90px;
        }
      }
      &:has(.#{bem('grid-toolbar__column-list--reset-column')}) {
        .#{bem('grid-toolbar__column-list--header-item')}:nth-child(2) {
          padding-right: getCssVar(grid-toolbar, reset-column-width);
        }
      }
    }

    @include m(content) {
      flex-grow: 1;
      width: 100%;
      overflow-y: auto;
      background-color: getCssVar(color, white);
    }

    @include m(item) {
      @include flex(row, space-between, center);

      padding: getCssVar(spacing, extra-tight) getCssVar(spacing, super-tight);
      font-size: getCssVar(font-size, regular);
      border-bottom: 1px solid getCssVar(color, border);

      &:hover {
        background-color: getCssVar(color, primary, light, hover);
      }
    }

    @include m(item-caption) {
      @include utils-ellipsis;

      min-width: 130px;
      padding: getCssVar(spacing, extra-tight);
    }

    @include m(item-state) {
      flex-shrink: 0;
      min-width: 90px;
    }

    @include m(reset-column) {
      position: absolute;
      top: 50%;
      right: var(--el-popover-padding);
      right: 0;
      z-index: 6;
      transform: translateY(-50%);

      &.el-button.is-circle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: getCssVar(grid-toolbar, reset-column-width) !important;
        height: getCssVar(grid-toolbar, reset-column-height) !important;
        padding: 0;

        &:active,
        &:focus {
          color: getCssVar(color, text, 0);
          background: getCssVar(color, white);
          border-color: getCssVar(color, text, 0);
        }

        &:hover {
          color: getCssVar(color, primary);
          background: getCssVar(color, primary, hover);
          border-color: getCssVar(color, primary);
        }
      }
    }
  }

  @include e(export-list) {
    display: flex;
    width: 100%;
  }
}
